<!doctype html>
<html>
<head>
  <title>Jot: JavaScript Object Template</title>
  <script type="text/javascript" src="jot.js"></script>
  <script type="text/javascript" src="demo_helper.js"></script>
</head>
<body>
<pre>
<script type="text/javascript">
  var t8 = new Jot('<ul>').each(10).add('<li>{$index}</li>').endEach().add('</ul>');
  print(t8.toString(3));


  var template = new Jot('<ul>\n')
      .each().add('<li>[{$index}] {$key} : {$value}</li>\n').endEach()
      .add('</ul>');


  // <ul>
  // <li>[0] 0 : x</li>
  // <li>[1] 1 : y</li>
  // <li>[2] 2 : z</li>
  // </ul>
  print(template.toString(['x','y','z']));


  // <ul>
  // <li>[0] n1 : x</li>
  // <li>[1] n2 : y</li>
  // <li>[2] n3 : z</li>
  // </ul>

  print(template.toString({n1:'x',n2:'y',n3:'z'}));


  template = new Jot()
      .a('{employeesTitle} \n')
      .each('employees')
      .a(' * ')
      .a('name : {name}').a(' | ')
      .a('mail : {mail} ')
      .a('\n').endEach();


  var model = {
    employeesTitle:'Employees Info',
    employees:[
      {name:'Peter', mail:'peter@foo.com', level:1},
      {name:'Sam', mail:'sam@foo.com', level:2},
      {name:'Jane', mail:'jane@foo.com', level:3},
      {name:'Sarah', mail:'sarah@foo.com', level:4}
    ]
  };


  // Employees Info
  //  * name : Peter | mail : peter@foo.com
  //  * name : Sam | mail : sam@foo.com
  //  * name : Jane | mail : jane@foo.com
  //  * name : Sarah | mail : sarah@foo.com


  print(template.toString(model));


  var users = [
    {'name':'kelly', age: 65},
    {'name':'peter', age: 9} ,
    {'name':'sam', age: 14},
    {'name':'judy', age: 30}
  ];

  var temp = new Jot();
  temp.add('<table border="1">')
      .a('<thead><th>name</th><th>age</th><th>category</th></thead>')
      .a('<tbody>')

      .each().a('<tr')// Each Row

      .when('{$first}').a(' class="first" ')
      .elseWhen('{$last}').a(' class="last" ')
      .endWhen()

      .not('{$index} % 2').a(' style="background:#ccc"').endNot()
      .a('>')

      .each()// Each Cell
      .a('<td>{$value}</td>')
      .endEach()

      .a('<td>')// Category cell
      .when('{age} < 20').add(' 0 ~ 20')
      .elseWhen('{age} < 40').add(' 20 ~ 40')
      .elseWhen('{age} < 60').add(' 40 ~ 60')
      .otherwise().add('60 or older')
      .endWhen()
      .a('</td>')

      .a('</tr>').endEach()
      .a('</tbody></table>');

  print(temp.toString(users));
</script>
</pre>
</body>
</html>